<template>
   <div class="wrapper">
 <swiper :options="swiperOption" v-if="showSwiper">
    <swiper-slide v-for="item of list" :key="item.id">
      <img class="swiper-img" :src="item.imgUrl" alt="">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
      </div>
</template>
<!--suppress JSAnnotator -->
<script>
 export default{
   name: 'homeSwiper',
   props:{
     list: Array
   },
   data (){
     return {
       swiperOption: {
         pagination:'.swiper-pagination',
         loop: true
       }
     }
   },
   computed: {
     showSwiper () {
       return this.list.length
     }
   }
 }
</script>
<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background:  #fff !important
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom:27%
    background : #eee
    .swiper-img
       width: 100%
</style>
